<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax $.get $.post的使用</title>
</head>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
    <p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
    <p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
    $(document).ready(function () {
        $('#button_login').mousedown(function (){
            var username = $("#username").val();//取框中的用户名
            var password = $("#password").val();//取框中的密码
            $.ajax({ //一个Ajax过程
                type: "post", //以post方式与后台沟通
                url : "login.php", //与此php页面沟通
                dataType:'json',//从php返回的值以 JSON方式 解释
                data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p
                success: function(json){//如果调用php成功
                    $('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置
                },
                error:function(data){
                  alert(data);
                }
            });
        });
        $('#test_post').mousedown(function (){
            $.post(
                    'login.php',
                    {
                        username:$('#username').val(),
                        password:$('#password').val()
                    },
                    function (data) //回传函数
                    {
                        var myjson=JSON.parse(data);
                        $('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
                    }
            );
        });
        //$.get()方式：
        $('#test_get').mousedown(function (){
            $.get(
                    'login.php',
                    {
                        username:$('#username').val(),
                        password:$('#password').val()
                    },
                    function(data) //回传函数
                    {
                        var myjson=JSON.parse(data);
                        $('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
                    }
            );
        });
    });
</script>
</body>
</html>